{extend name="base"/}
{block name="main"}
<article class="cl pd-20">
		<div class="n_tab_line">
			<a href="{:url('advert/index')}" class="n_tab_list02">广告位列表</a>
			<a href="{:url('advert/addAdvertPosition')}" class="n_tab_add02">添加广告位</a>
			<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
			<div class="cl"></div>
		</div>
	<div class="form form-horizontal">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>广告位名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" autocomplete="off" value="" placeholder="广告位名称" class="input-text" id="ap_name" name="ap_name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>简介：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea id="editor" class="input-common"></textarea>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>类别：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<select id="ap_class" name="account" class="form-control m-b input-common">
					<option value="0">多图</option>
					<option value="1">文字</option>
					<option value="2">轮播</option>
					<option value="3">单图</option>
				</select>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>选择模块：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<select id="ap_mod" class="form-control m-b input-common">
					<option value="-1">请选择..</option>
					{volist name="list" id="ad"}
						<option value="{$ad['id']}">{$ad['name']}</option>
					{/volist}
				</select>
			</div>
		</div>
		<div class="row cl dis">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>宽度比例：</label>
			<div class="formControls col-xs-8 col-sm-1 skin-minimal">
					<input type="text"  onkeyup='this.value=this.value.replace(/\D/gi,"")' id="width" class="input-text" value="">
			</div>
		</div>
		<div class="row cl dis">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>高度比例：</label>
			<div class="formControls col-xs-8 col-sm-1 skin-minimal">
					<input type="text"  onkeyup='this.value=this.value.replace(/\D/gi,"")' id="height" class="input-text" value=''>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">是否启用：</label>
			<div class="formControls col-xs-8 col-sm-3 skin-minimal">
				<div class="check-box">
					<input type="checkbox" checked="checked" id="is_use" value="1">
					<label for="is_use">&nbsp;</label>
				</div>
			</div>
		</div>
		<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red"></span>默认背景色：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input id="ap_background_color" type="color" style="width:60px;height:25px;" placeholder="默认背景色" class="input-text">
		</div>
	</div>
		<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" onclick="addSuppAjax()" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
		</div>
	</div>
</article>
{/block}
{block name="script"}
<script src="/static/js/ajax_file_upload.js" type="text/javascript"></script>
<script src="/static/js/file_upload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('.skin-minimal input').iCheck({
		checkboxClass: 'icheckbox-blue',
		radioClass: 'iradio-blue',
		increaseArea: '20%'
	});
});
function on_upload() {
	$("#uploadImg").click();
}
//广告位图片上传
function imgUpload(event) {
    var fileid = $(event).attr("id");
    var str = $(event).next().attr("id");
    var data = { 'file_path' : "advertposition/" };
    uploadFile(fileid,data,function(res){
        if(res.code){
            $("#img"+str).attr("src",res.data);
            $("#"+str).val(res.data);
            layer.msg(res.message,{icon:1,time:1000});
        }else{
            layer.msg(res.message,{icon:1,time:1000});
        }
    });
}
/**
 *添加广告位
 */
var isClick = false;
function addSuppAjax() {
    var ap_name = $("#ap_name").val();
    var ap_intro = $("#editor").val();
    var ap_class = $("#ap_class").val();
    var ap_mod = $("#ap_mod").val();
    var width = $("#width").val();
    var height = $("#height").val();
    if($("#is_use").prop("checked")){
        var is_use = 1;
    }else{
        var is_use = 0;
    }
    var ap_background_color = $("#ap_background_color").val();
    if(verify(ap_name,ap_intro,width,height,ap_mod)){
        if(isClick){
            return false;
        }
        isClick = true;
        $.ajax({
            type : "post",
            url : "{:url('advert/addAdvertPosition')}",
            data : {
                'ap_name' : ap_name,
                'ap_intro' : ap_intro,
                'ap_class' : ap_class,
                'is_use' : is_use,
                'width' : width,
                'height' : height,
                'ap_mod' : ap_mod,
                'ap_background_color' : ap_background_color,
            },
            async : true,
            success : function(data) {
                if (data["code"] > 0) {
                    layer.msg('添加成功!',{icon:1,time:1000},function () {
                        window.parent.location.href="{:url('advert/index')}";
                    });
                }else{
                    isClick = false;
                    layer.msg(data['message'],{icon:5,time:1000});
                }
            }
        });
    }
}
function verify(ap_name,ap_intro,width,height,ap_mod){
    if(ap_name == ""){
        layer.msg('请填写广告位名称',{icon:5,time:1000});
        $("#ap_name").focus();
        return false;
    }
    if (ap_intro == '') {
        layer.msg('请填写简介',{icon:5,time:1000});
        return false;
    }
    if(width == ""){
        layer.msg('请填写宽度比例',{icon:5,time:1000});
        $("#width").focus();
        return false;
    }
    if(height == ""){
        layer.msg('请填写高度比例',{icon:5,time:1000});
        $("#height").focus();
        return false;
    }
    if(width <=0){
        layer.msg('宽度比例大于0',{icon:5,time:1000});
        $("#width").focus();
        return false;
    }
    if(height <=0){
        layer.msg('高度比例大于0',{icon:5,time:1000});
        $("#height").focus();
        return false;
    }
    if(ap_mod =='-1'){
        layer.msg('请选择广告所在模块',{icon:5,time:1000});
        $("#ap_type").focus();
        return false;
    }
    return true;
}
</script>
{/block}